<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    var dataBJ = [
        [80, 70, 70, 90, 70, 80]
    ];

    var dataGZ = [
        [70, 90, 60, 86, 70, 80]
    ];

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));


    // 指定图表的配置项和数据
    var lineStyle = {
        normal: {
            width: 1,
            opacity: 0.5
        }
    }

    option1 = {
        title: {
            text: '基础雷达图'
        },
        tooltip: {},
        legend: {
            data: ['guoao', 'caodong']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
            }
            },
            indicator: [
                {name: 'healthy', max: 100},
                {name: 'money', max: 100},
                {name: 'look', max: 100},
                {name: 'potential', max: 100},
                {name: 'EQ', max: 100},
                {name: 'IQ', max: 100}
            ]
        },
        series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            areaStyle: {normal: {}},
            data : [
                {
                    value : [80, 70, 70, 90, 70, 80],
                    name : 'guoao'
                },
                {
                    value : [70, 90, 60, 86, 70, 80],
                    name : 'caodong'
                }
            ]
        }]
    };

    var option2 = {
        backgroundColor: '#161627',
        title: {
            text: '六芒星',
            left: 'center',
            textStyle: {
                color: '#eee'
            }
        },
        legend: {
            bottom: 5,
            data: ['guoao', 'caodong'],
            itemGap: 20,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            selectedMode: 'single'
        },
        // visualMap: {
        //     show: true,
        //     min: 0,
        //     max: 20,
        //     dimension: 6,
        //     inRange: {
        //         colorLightness: [0.5, 0.8]
        //     }
        // },
        radar: {
            indicator: [
                {name: 'healthy', max: 100},
                {name: 'money', max: 100},
                {name: 'look', max: 100},
                {name: 'potential', max: 100},
                {name: 'EQ', max: 100},
                {name: 'IQ', max: 100}
            ],
            shape: 'circle',
            splitNumber: 5,
            name: {
                textStyle: {
                    color: 'rgb(238, 197, 102)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                        'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                        'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(238, 197, 102, 0.5)'
                }
            }
        },
        series: [
            {
                name: 'guoao',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataBJ,
                symbol: 'none',
                itemStyle: {
                    normal: {
                        color: '#F9713C'
                    }
                },
                areaStyle: {
                    normal: {
                        opacity: 0.3
                    }
                }
            },
            {
                name: 'caodong',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataGZ,
                symbol: 'none',
                itemStyle: {
                    normal: {
                        color: '#B3E4A1'
                    }
                },
                areaStyle: {
                    normal: {
                        opacity: 0.3
                    }
                }
            },
        ]
    }

    myChart1.setOption(option1)
    myChart2.setOption(option2)
    </script>
</body>
</html>
